<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>暮色音乐</title>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>

    <script src="../../static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/css/mystyle.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>暮色音乐</h1>
        </header>
        <section>
            <ul id="myTab" class="nav nav-tabs">
                <li class="active">
                    <a href="#synthesize" data-toggle="tab">
                        综合
                    </a>
                </li>
                <li><a href="#fashion" data-toggle="tab">流行</a></li>
                <li><a href="#retro" data-toggle="tab">复古</a></li>
                <li><a href="#classics" data-toggle="tab">经典</a></li>
            </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="synthesize">
                    <table class="table table-striped">
                        <caption>综合</caption>
                        <thead>
                        <tr>
                            <th>名称</th>
                            <th>城市</th>
                            <th>邮编</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>Tanmay</td>
                            <td>Bangalore</td>
                            <td>560001</td>
                        </tr>
                        <tr>
                            <td>Sachin</td>
                            <td>Mumbai</td>
                            <td>400003</td>
                        </tr>
                        <tr>
                            <td>Uma</td>
                            <td>Pune</td>
                            <td>411027</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade" id="fashion">
                    <table class="table table-striped">
                        <caption>流行</caption>
                        <thead>
                        <tr>
                            <th>名称</th>
                            <th>城市</th>
                            <th>邮编</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>Tanmay</td>
                            <td>Bangalore</td>
                            <td>560001</td>
                        </tr>
                        <tr>
                            <td>Sachin</td>
                            <td>Mumbai</td>
                            <td>400003</td>
                        </tr>
                        <tr>
                            <td>Uma</td>
                            <td>Pune</td>
                            <td>411027</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade" id="retro">
                    <table class="table table-striped">
                        <caption>复古</caption>
                        <thead>
                        <tr>
                            <th>名称</th>
                            <th>城市</th>
                            <th>邮编</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>Tanmay</td>
                            <td>Bangalore</td>
                            <td>560001</td>
                        </tr>
                        <tr>
                            <td>Sachin</td>
                            <td>Mumbai</td>
                            <td>400003</td>
                        </tr>
                        <tr>
                            <td>Uma</td>
                            <td>Pune</td>
                            <td>411027</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade" id="classics">
                    <table class="table table-striped">
                        <caption>经典</caption>
                        <thead>
                        <tr>
                            <th>名称</th>
                            <th>城市</th>
                            <th>邮编</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>Tanmay</td>
                            <td>Bangalore</td>
                            <td>560001</td>
                        </tr>
                        <tr>
                            <td>Sachin</td>
                            <td>Mumbai</td>
                            <td>400003</td>
                        </tr>
                        <tr>
                            <td>Uma</td>
                            <td>Pune</td>
                            <td>411027</td>
                        </tr>
                        <tr>
                            <td>Uma</td>
                            <td>Pune</td>
                            <td>411027</td>
                        </tr>
                        <tr>
                            <td>Uma</td>
                            <td>Pune</td>
                            <td>411027</td>
                        </tr>
                        <tr>
                            <td>Uma</td>
                            <td>Pune</td>
                            <td>411027</td>
                        </tr>
                        <tr>
                            <td>Uma</td>
                            <td>Pune</td>
                            <td>411027</td>
                        </tr>
                        <tr>
                            <td>Uma</td>
                            <td>Pune</td>
                            <td>411027</td>
                        </tr>
                        <tr>
                            <td>Uma</td>
                            <td>Pune</td>
                            <td>411027</td>
                        </tr>
                        <tr>
                            <td>Uma</td>
                            <td>Pune</td>
                            <td>411027</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <script>
                $(function(){
                    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                        // 获取已激活的标签页的名称
                        var activeTab = $(e.target).text();
                        // 获取前一个激活的标签页的名称
                        var previousTab = $(e.relatedTarget).text();
                        $(".active-tab span").html(activeTab);
                        $(".previous-tab span").html(previousTab);
                    });
                });
            </script>

        </section>
        <footer>
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li class="active"><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </footer>
    </div>
</body>
</html>